<template>
  <div class="fill-order-warpper">
    <div v-if="addressList&&addressList.length>0" class="address-box clearfix">
      <div class="middle clearfix" v-for="(addressItem,index) in addressList" :key="index"> 
        <div class="section-line">收货人：{{addressItem.name}}
          <div class="phone">{{addressItem.phone}}</div>
        </div>
        <div class="address-line">收货地址：<span>{{addressItem.areaCode}}</span></div>
        <div class="action-line">
            <div class="box flex">
                <a class="flex" href="javascript:;" @click="editAddress(addressItem.id)">
                  <i class="edit"></i>
                  <span>编辑</span>
                </a>
                <a class="flex" href="javascript:;" @click="deleteAddress(addressItem.id)">
                  <i class="del"></i>
                  <span>删除</span>
                </a>
            </div>

        </div>
      </div>
    </div>
    <!-- <group>
      <cell-box class="product-box">
        <img src="../assets/images/2.jpg" alt="" class="left">
        <div class="middle flex">
            <div>
                <div class="name-box">负离子毛巾杀菌祛味</div>
                <div class="section-line">粉色：30cm</div>
                <div class="price-box">￥95.50 <span>￥244.9</span></div>
            </div>

          <span>x1</span>
        </div>
        <div class="right"></div>
      </cell-box>
      <cell title="商品合计" value="￥95"></cell>
      <cell title="运费" value="￥0.00"></cell>
      <cell link="/" title="优惠券" value="满89减20" is-link></cell>
    </group> -->
    <div v-else class="emptyBox">
      <div>您还没有收货地址，请先添加收货地址</div>
    </div>
    <div class="address-bom flex" @click="addAddress()">
      <img src="../assets/images/addyuan.png">
      <span>添加地址</span>
    </div>
  </div>
</template>

<script>
  import axios from '@/api/request'
  import {
    Tab,
    Group,
    Cell,
    CellBox

  } from "vux";

  export default {
    name: '',
    components: {
      CellBox,
      Cell,
      Group,
    },
    data () {
      return {
        addressList:[]
      }
    },
    created(){
      
    },
    mounted(){
      this.fetchAddressList()
    },
    methods:{
      fetchAddressList(){
        axios('/device/userAddress/find/'+this.$route.query.userId,'post',{}).then(res=>{
          if(res.data.code==1000){
              this.addressList = res.data.data
              
          }
        })
      },
      editAddress(address){
        console.log(address)
        this.$router.push({path: 'EditAddress',query:{userId:this.$route.query.userId,adressId:address}})
      },
      deleteAddress(address){
        axios('/device/userAddress/delete/'+address,'post',{}).then(res=>{
          if(res.data.code==1000){
             this.$vux.toast.text('删除成功')
              this.fetchAddressList()
          }
        })
      },
      addAddress(){
        this.$router.push({path: 'EditAddress',query:{userId:this.$route.query.userId}})
      }
    }

  };
</script>

<style>
    /*body{
        position: absolute;
        left: 0;
        top: 0;
        background: #f3f5f9;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }*/
    .vux-label{
        font-size: 14px;
        color: #444;
    }
</style>
<style lang="less" scoped>
.fill-order-warpper{
   background: #f2f3f6;
   min-height:100%;
   width:100%;
   padding-bottom: 1.29333333rem;
}
  .product-box {
    display: flex;
    .left {
      flex-grow: 0;
      width: 72rem/37.5;
      height: 63rem/37.5;
      position: absolute;
    }
    .right {
      flex-grow: 0;
    }
  }

  .address-box {
    // position: relative;
    // min-height: 80rem/37.5;
    // padding:25rem/75 0 0;
    // padding-bottom: 50rem/75;
    // background:#fff;
    overflow: hidden;
    &:after{
        content: '';
        height:25rem/75;
        background:#f3f5f9;
        width:100%;
        position:absolute;
        bottom: 0;
        left:0;
    }
    .left {
      position: absolute;
      width: 16rem/37.5;
      height: 18rem/37.5;
      top: 26rem/37.5;
      left: 13rem/37.5;
    }
    .middle {
      // margin-left: 43rem/37.5;
      // margin-right: 33rem/37.5;
      margin-bottom: 10px;
      overflow: hidden;
      padding-top: 10px;
      background: #fff;
      .section-line {
        padding: 0 15px;
        font-size: 15rem/37.5;
        color: #444444;
      }
      .address-line{
        padding: 0 15px;
        font-size: 15rem/37.5;
        margin-top: 7rem/37.5;
        margin-bottom: 7rem/37.5;
        // padding-right: 20rem/75;
        color: #444444;
        line-height: 46rem/75;
        span{
          // font-size: 12rem/37.5;

        }

      }
      .action-line{
        height: 35rem/37.5;
        box-sizing: border-box;
        border-top: 1px solid #f3f5f9;
        .box{
          float: right;
          height: 35rem/37.5;
          line-height: 35rem/37.5;
          padding-right: 30rem/75;
          a{
            margin-left: 40rem/75;
            line-height: 35rem/37.5;
            align-items: center;
            i{
              width: 44rem/75;
              height: 48rem/75;
              margin-right: 10rem/75;
              display: block;
              position:relative;
            }
            .edit::after{
              content:"";
              width:40rem/75;
              height:44rem/75;
              display:block;
              position:absolute;
              z-index:2;
              top:0;
              left:0;
              background: url('../assets/images/delete.png') no-repeat;
              background-size: 100%;
            }
            .del::after{
              content:"";
              width:40rem/75;
              height:44rem/75;
              display:block;
              position:absolute;
              z-index:2;
              top:0;
              left:0;
              background: url('../assets/images/delete.png') no-repeat;
              background-size: 100%;
            }
          }
        }
      }
      .phone{
        font-size: 14rem/37.5;
        float: right;
        margin-top: 0;
      }
    }
    .right {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 22rem/37.5;
      display: flex;
      align-items: center;
      img {
        width: 8rem/37.5;
        height: 14rem/37.5;
      }

    }
  }
  .emptyBox{
    height: 100rem/75;
    line-height: 100rem/75;
    text-align: center;
    background: #fff;
    color: #000;
  }
  .address-bom{
    position:fixed;
    bottom: 0;
    left:0;
    height:97rem/75;
    align-items:center;
    background: #ffda44;
    // box-shadow:-2px 0 10px 2px rgba(0,0,0,.6);
    width:100%;
    justify-content: center;
    z-index: 999;
    img{
        width: 50rem/75;
        height: 50rem/75;
    }
    span{
      margin-left: 8px;
      color: #333;
      font-size: 18px;
      font-weight: 600;
    }
    // div{
    //     width:465rem/75;
    //     text-align: center;
    //     font-size:32rem/75;
    //     color: #ff4444;
    // }
    // a{
    //     flex: 1;
    //     text-align: center;
    //     background: #ffda44;
    //     height:100%;
    //     line-height: 95rem/75;
    //     font-size:32rem/75;
    //     color: #444444;
    // }
  }
</style>

<style>
  .fill-order-warpper .weui-cells:before {
    content: none;
  }

  .fill-order-warpper .weui-cells:after {
    border-bottom: 1rem/37.5 solid #dbdbdb;
  }

  .fill-order-warpper .weui-cell:before {
    border-top: 1rem/37.5 solid #dbdbdb;
  }
  .fill-order-warpper .weui-cells{
    margin-top: 0;
  }
  .vux-label{
    font-size: 0.32rem;
  }

</style>
